<template>
    <div>
        <h1>toRef</h1>
        <h1>↓obj中的name</h1>
        <h1>{{obj.name}}</h1>
        <h1>↓ref包裹的响应式数据</h1>
        <h1>{{name1}}</h1>
        <h1>↓toRef的数据</h1>
        <h1>{{name2}}</h1>
        <button @click="changeName">改变name</button>
    </div>
</template>

<script lang="ts">
import { defineComponent ,reactive, toRef,ref} from 'vue'

export default defineComponent({
    setup () {
        const obj = reactive({
            name:'tom',
            age:20
        })
        const name1 = ref(obj.name);
        const name2 = toRef(obj,'name');
        function changeName(){
            name1.value += '111';//不会更改obj.name的值 ref得到的值是独立的拷贝了一份新数据，在堆中是独立的
            name2.value += '222';//会更高obj.name的值 toRef的值和源对象是同一个空间 一改全改
            console.log(obj);
        }
        return {
            obj,
            name1,
            name2,
            changeName
        }
    }
})
</script>

<style scoped>

</style>